Header dividido

El header es una de las cosas a las que más importancia damos en un diseño, es lo primero que vemos al acceder a una página.Personalmente me gustan poco recargados, un título, una imagen que nos caracterice y ya. Pero... la tentación es grande y probar variaciones no cuesta nada así que ¿por qué no hacerlo?

J.Miur nos mostró  una serie de entradas sobre el header, aprendimos a entenderlo y jugamos un buen rato cambiando, eliminando y añadiendo imágenes a nuestro antojo.

• Tratando de entender el Header [1] [2]

• El header de Blogger (jugando un poco)

Pizcos nos explica como añadir un "Header múltiple" algo que más de uno no va a resistirse a probar, estamos a la espera de la segunda parte que promete ser interesante y es lo que más nos gusta a todos la personalización o añadir estilos.

• Header múltiple

Rosa nos explicaba una idea de BlogU "Dividir la cabecera" el resultado es situar el gadget de cabecera proporcionado por Blogger a la izquierda y añadir a la derecha la posibilidad de añadir un nuevo gadget consiguiendo de esta forma un header con dos bloques para contenido.

• Dividir la cabecera del blog

No sé si alguien recordará que en lugar del texto "Ni es todo lo que está, ni está todo lo que es" lo que había era el gadget de Twitter, es lo que voy a tratar de explicar porque es la modificación que hice en mi cabecera y  me han preguntado más de una ocasión, la respuesta es "El header está dividido en dos bloques"

En mi plantilla tengo las medidas modificadas así que como suelo hacer los ejemplos serán en una plantilla Minima sin modificar, pueden probarse en cualquier otra plantilla pero es recomendable guardar una copia de respaldo o mejor aún probar en otro blog.

El header de una plantilla Minima viene definido en la hoja de estilos de la siguiente forma [+/-]

#header-wrapper {/* espacio que acoge todo el contenido del header */

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

#header-inner {/* espacio del gadget de la cabecera */

background-position: center;

margin-left: auto;

margin-right: auto;

}

#header { /* espacio interior donde se encuentra el header */

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

#header h1 {/* título del blog */

margin:5px 5px 0;

padding:15px 20px .25em;

line-height:1.2em;

text-transform:uppercase;

letter-spacing:.2em;

font: $pagetitlefont;

}

#header a {/* estilos para enlace del título */

color:$pagetitlecolor;

text-decoration:none;

}

#header a:hover {/* estilos para enlace del título al pasar el ratón*/

color:$pagetitlecolor;

}

#header .description {/* texto de la descripción */

margin:0 5px 5px;

padding:0 20px 15px;

max-width:700px;

text-transform:uppercase;

letter-spacing:.2em;

line-height: 1.4em;

font: $descriptionfont;

color: $descriptioncolor;

}

#header img {/* no tiene función alguna */

margin-$startSide: auto;

margin-$endSide: auto;

}

Vamos a dividir el header en dos partes nos situamos en

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>

</b:section>

</div>

y lo sustituimos por

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

<b:widget id='Header1' locked='true' title='Título de tu blog (cabecera)' type='Header'/>

</b:section>

<b:section class='header' id='header-derecha' showaddelement='yes'/>

</div>

Ya podemos añadir un nuevo hadget en la cabecera, al establecer showaddelement='yes' podemos añadir más de un gadget si añadimos 'no'sólo podemos añadir un gadget.

Para que todo tome forma deberemos añadir unos estilos al nuevo gadget y modificar la medida del antiguo, buscamos:

#header {

margin: 5px;

border: 1px solid $bordercolor;

text-align: center;

color:$pagetitlecolor;

}

y en su lugar añadimos

#header {

width: 300px;

float: left;

margin:0 auto 10px;

text-align: center;

color:#333;

border:1px solid #ccc;

}

#header-derecha {

width: 300px;

float: right;

color: #333;

margin:0 auto 10px;

border:1px solid #ccc;

}

Para eliminar el borde del bloque exterior suprimimos la línea en negrita de:

#header-wrapper {

width:660px;

margin:0 auto 10px;

border:1px solid $bordercolor;

}

También añadiremos el mismo margen que en header y header-derecha margin:0 auto 10px;

Ya sólo queda añadir contenido al nuevo gadget para personalizar el bloque si lo deseamos.

El borde gris nos ayuda para saber si el gadget queda centrado, lo podemos eliminar suprimiendo border:1px solid #ccc;

Si lo que deseamos es darle un toque personal entonces daremos rienda suelta a la imaginación trabajando los estilos de cada bloque.

Subimos o bajamos el nuevo gadget (header-derecha)con margin-top:10px;
Añadimos un fondo con background: transparent url(url imagen);

#header-derecha {

width: 300px;

float: right;

color: #333;

margin:0 auto 10px;

margin-top:10px;

background: transparent url(url imagen);

}

Si por el contrario deseamos que la imagen ocupe todo el bloque del header la añadiremos en header-wrapper proporcionándole altura por ejemplo con height:100px; dependiendo el alto que deseamos darle aumentamos el valor en height.

#header-wrapper {

width: 660px;

margin:0 auto 10px;

height:100px;

background: transparent url(url imagen);

}

Y siguiendo con los cambios lo hacemos esta vez en el estilo de fuente, en header h1

#header h1 {

margin-top: 50px;

font-family: Georgia;

font-size: 24px;

letter-spacing: -1px;

padding: 0;

width: 300px;

}

Al dividir la cabecera tenemos la comodidad de cambiar de gadget sin necesidad de hacer grandes cambios únicamente añadiendo un nuevo gadget en plantilla de diseño y eliminando el anterior o incluso añadir más de un gadget.
No olvidemos que el gadget de cabecera sigue estando así que si preferimos añadir una imagen en lugar de título podemos hacerlo igual que antes de hacer las modificaciones.

¿Izquierda o derecha? salimos de dudas cambiando la flotación de nuevo gadget (header-derecha) por la flotación del gadget de cabecera de forma que quede así.

#header {

width: 300px;

float: right;

margin:0 auto 10px;

text-align: center;

color:#333;

border:1px solid #ccc;

}

#header-derecha {

width: 300px;

float: left;

color: #333;

margin:0 auto 10px;

border:1px solid #ccc;

}

Si decidimos cambiar la flotación y para no crear confusiones lo que hacemos es cambiar el nombre del nuevo gadget y en lugar de llamarle #header-derecha le llamaremos #header-izquierda

Lo mismo haremos con el bloque del gadget, donde dice:

<b:section class='header' id='header-derecha' showaddelement='yes'/>

cambiaremos header-derecha por header-izquierda